<template>
  <div v-if="!route.query.id">
    <a-card>
      <a-row :gutter="24">
        <a-col :span="6">
          <a-select v-model:value="proposalNameOrCode" style="width: 35%">
            <a-select-option value="overtureName">提案名称</a-select-option>
            <a-select-option value="_id">提案编号</a-select-option>
          </a-select>
          <a-input
            v-model:value="filterRule.proposalNameOrCodeData"
            style="width: 65%"
          />
        </a-col>
        <a-col :span="5">
          <a-input
            v-model:value="filterRule.overtureName"
            placeholder="请输入提案人姓名"
          />
        </a-col>
        <a-col :span="5">
          <MySelect
            title="所属教代会"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="forTeachersSelect"
            @change="changeSelect('forTeachers', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="5">
          <MySelect
            title="所属代表团"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="delegacySelect"
            @change="changeSelect('delegacy', $event)"
          ></MySelect>
        </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-top: 10px">
        <a-col :span="6">
          <MySelect
            title="请选择工会"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="delegacySelect"
            @change="changeSelect('delegacy', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="5">
          <MySelect
            title="请选择单位"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="delegacySelect"
            @change="changeSelect('delegacy', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="5">
          <MySelect
            title="请选择立案结果"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="delegacySelect"
            @change="changeSelect('delegacy', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="5">
          <a-button type="primary">
            <template #icon><SearchOutlined /></template>
            搜索
          </a-button>
        </a-col>
      </a-row>
    </a-card>
    <MyTable
      :tableData="tableData"
      :loading="loading"
      @reload="getTableData"
      :useNumber="true"
      :columns="columns"
    >
    </MyTable>
  </div>
  <div v-else>
    <MyInvite />
  </div>
</template>

<script setup lang="ts">
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import MyInvite from "./components/inviteSecond.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { getOverture, delOverture } from "@/api/overtrue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { ref, reactive, onMounted, h } from "vue";
import { Tag, message, Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const proposalNameOrCode = ref("overtureName");
const filterRule = reactive({
  proposalNameOrCodeData: "",
  overtureName: "",
  delegacy: "",
  forTeachers: "",
});

onMounted(() => {
  getTableData();
});
const forTeachersSelect = [
  {
    value: "forTeachers0",
    label: "第二届第四次",
  },
  {
    value: "forTeachers1",
    label: "第二届第三次",
  },
  {
    value: "forTeachers2",
    label: "第二届第二次",
  },
  {
    value: "forTeachers3",
    label: "第二届第一次",
  },
];
const delegacySelect = [
  {
    value: "delegacy0",
    label: "第一代表团",
  },
  {
    value: "delegacy1",
    label: "第二代表团",
  },
  {
    value: "delegacy2",
    label: "第三代表团",
  },
  {
    value: "delegacy3",
    label: "第四代表团",
  },
];
/** 全部的select组件的change触发后的事件 */
const changeSelect = (key: keyof typeof filterRule, value: any) => {
  filterRule[key] = value;
};
/** 表格的渲染功能 */
const tableData = ref<any[]>([]);
/** 表格是否显示加载中 */
const loading = ref<boolean>(false);
/** 获取表格数据的函数 */
const getTableData = (page = 1, size = 10) => {
  console.log(page, size);
  loading.value = true;
  getOverture().then((res: any) => {
    console.log(res);
    tableData.value = res.data.data;
    loading.value = false;
  });
};
/**
 * 表格的操作功能 点击表格操作后任意一个触发 id=当前提案的id actionKey=当前点击的key
 */
const overtureAvtion = (id: string, actionKey: number) => {
  switch (actionKey) {
    case 0:
      message.success(`${id}邀请复议人`);
      router.push({ path: "/overtureHandle/MyOverture", query: { id } });
      break;
    case 1:
      message.success(`${id}查看`);
      router.push({
        name: "audit",
        params: { id, view: 1 },
      });
      break;
    case 2:
      message.success(`${id}编辑`);
      break;
    case 3:
      Modal.confirm({
        title: "您确定要删除这条提案吗?",
        style: {
          top: "35%",
        },
        onOk() {
          loading.value = true;
          delOverture(id).then(() => {
            getTableData();
            loading.value = false;
            message.success("提案删除成功。");
          });
        },
      });
      break;
  }
};
const columns = ref([
  {
    title: "提案编号",
    dataIndex: "proposalNameOrCode",
    align: "center",
    isShow: true,
    customRender: ({ index }: any) => {
      return `A0${index + 1}`;
    },
    fixed: 'left'
  },
  {
    title: "提案名称",
    dataIndex: "overtureName",
    isShow: true,
    align: "center",
    customRender: ({ text, record }: any) => {
      return h(
        "a",
        {
          onClick: () => {
            router.push({
              name: "audit",
              params: { id: record._id, view: 1 },
            });
          },
        },
        text
      );
    },
  },
  {
    title: "提案时间",
    dataIndex: "writeTime",
    isShow: true,
    align: "center",
  },
  {
    title: "提案类型",
    dataIndex: "overtureType",
    isShow: true,
    align: "center",
  },
  {
    title: "提案方式",
    dataIndex: "suggestMethod",
    isShow: true,
    align: "center",
  },
  {
    title: "届次",
    dataIndex: "forTeachers",
    isShow: true,
    align: "center",
  },
  {
    title: "代表团",
    dataIndex: "delegacy",
    isShow: true,
    align: "center",
  },
  {
    title: "提案状态",
    dataIndex: "codeName",
    isShow: true,
    align: "center",
    customRender: ({ record, text }: any) => {
      return h(Tag, { color: record.codeColor }, () => text);
    },
  },
  {
    title: "操作",
    dataIndex: "proposalNameOrCode",
    isShow: true,
    align: "center",
    maxWidth: 220,
    customRender: ({ record }: any) => {
      return h(
        "span",
        null,
        ["邀请附议人", "查看", "编辑", "删除"].map((item, index) => {
          if (index === 0 && record.code !== 150) {
            return;
          }
          return h(
            "a",
            {
              onClick: () => {
                overtureAvtion(record._id, index);
              },
              style: { margin: "0 5px" },
            },
            item
          );
        })
      );
    },
  },
]);
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
</style>
